<template>
  <div class="number-info">
    <div class="top-info">
      <div class="title">
        <span>
          {{winningNumbers.previous.dateNo}}
        </span>
        <span>
          <span>期</span><span class="on-pc">开奖号码</span>
        </span>
      </div>
      <div class="number-bar">
        <text-bar :content="winningNumbers.previous.context"></text-bar>
      </div>
    </div>
    <div class="bottom-info">
      <div class="numbers">
        <span 
          v-for="(number, index) in winningNumbers.previous.numbers.split(',')" 
          :key="index"
          class="ball ball-unselected "
          >
          {{number}}
        </span>
      </div>
    </div>
  </div> 
</template>

<script>
import NumberSelector from '@/components/base/number-selector/number-selector'
import TextBar from '@/components/base/text-bar/text-bar'

export default {
  components: {
    NumberSelector,
    TextBar
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '北京赛车',
          icon: '',
          numberInfo: {
            dateNo: '819048',
            numbers: '8,8,6,7,4,1',
            context:'大，小，单，双，全',
          }
        }
      }
    }
  },
  created() {
    console.log(this.winningNumbers)
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .number-info  
      .top-info 
        display flex
        align-items center
        margin-bottom 12px
        .title 
          @media screen and (max-width 750px) 
            .on-pc 
              display none
        .number-bar 
          margin-left 10px 
         
      .bottom-info
        .numbers 
          display flex
          .ball 
            width 32px 
            line-height 32px
            text-align center
            border-radius 50%
            margin-right 10px
            background linear-gradient(180deg, #f74646, $color-theme-red) 
            border 2px solid $color-theme-red
            color #fff
            font-size 16px 
            font-family ArialMT
      
</style>